<template>
	<scroll-view class="index" scroll-y="true" @scroll="handleScroll">
		<hwheader :bgColor="headerBgColor">
			<template v-slot:content><!-- 使用插槽 -->
				<text>智界 S7</text>
			</template>
		</hwheader>
		<view class="body">
			<view class="bg-img" v-for="(item, index) in itemImg" :key="index"><!-- 懒加载，循环输出 -->
				<image lazy-load="true" :src="item.img" mode="widthFix"></image>
			</view>
		</view>
		<view class="footer-placeholder"></view>
		<view class="footer">
			<view class="left" @click="goToTest">
				<text>预约试驾</text>
			</view>
			<view class="right" @click="goToBuy">
				<text>立即购买</text>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const itemImg = ref([]);
const headerBgColor = ref('rgba(241, 243, 245, 0)');

onMounted(() => {
	const reqTask = uni.request({
		url: 'https://mock.mengxuegu.com/mock/65bde07dd7f4776a06de0471/index-img', // easyMock 存储数据接口
		method: 'GET',
		success: (res) => {
			// console.log(res);
			itemImg.value = res.data.data;
			// console.log(itemImg.value)
		}
	});
	// reqTask.abort()//请求完成前发生跳转则切断请求
});

let bgOpacity = 0;
const handleScroll = (e) => {
	let top = e.detail.scrollTop
	// console.log(top);
	if (top <= 100) { //使得头部的背景颜色渐变
		bgOpacity = (top / 100).toFixed(2)
	} else {
		bgOpacity = 1
	}
	headerBgColor.value = `rgba(255, 255, 255, ${bgOpacity})`
}

const goToTest = () =>{
	uni.navigateTo({
		url:'/pages/testDrive/testDrive'
	})
}
const goToBuy = () =>{
	uni.navigateTo({
		url:'/pages/buy/buy'
	})
}


</script>

<style lang="scss" scoped>
.index {
	overflow: visible;
	height: 100vh;

	.body {
		box-sizing: border-box;
		.bg-img {
			width: 100%;
			position: relative;
		}
		image {
			width: 100vw;
			height: 100vh;
			display: block; //去除图片下方的空白
		}
	}
	.footer-placeholder{
		height: 100rpx;
	}
	.footer{
		background: #f1f3f5;
		height: 100rpx;
		bottom: 0;
		left: 0;
		right: 0;
		line-height: 100rpx;
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		.left{
			width: 350rpx;
			height: 80rpx;
			margin-left: 20rpx;
			color: #000;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #d8dadc;
			border-radius: 50rpx;
			line-height: 80rpx;
		}
		.right{
			width: 350rpx;
			height: 80rpx;
			margin-right: 20rpx;
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #cf0a2c;
			border-radius: 50rpx;
			line-height: 80rpx;
		}
	}
}
</style>
